<!DOCTYPE html>
<html lang="en">
<head>
    <title>我的消息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
</head>
<body>
<div class="container">
    <div id="tb" style="padding:0 30px;">
        开始时间：<input id="dt1" type="text" name="birthday">
        结束时间：<input id="dt2" type="text" name="birthday">
        关键词: <input type="text" id="payerCode" name="payerCode" style="width:166px;height:35px;line-height:35px;"/>
        <a href="javascript:search()" id="" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    </div>
    <table id="dg"></table>
</div>
<script type="text/javascript">

    $(function () {
        $('#dt1').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
        $('#dt2').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
        $("#dg").datagrid({
            title: "资料列表",
            method: "get",
            url: 'json/user_message.json',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageList: [2, 5, 10, 20, 30],
            rownumbers: true,
            pagePosition: "bottom",
            columns: [[
                {field: "ck", checkbox: "true"},
                {field: "order", title: '序号', width: 50},
                {field: "title", title: '标题', width: 200},
                {field: "content", title: '主题', width: 350},
                {field: "receiveTime", title: '接收时间', width: 200},
                {field: "sender", title: '发件人', width: 100},
                {field: "isRead", title: '是否已读', width: 50},

                {
                    field: "option", title: '操作', width: 200,
                    formatter: function (value, rowData, index) {
                        return "<a href='javascript:void(0)' onclick='remove(" + rowData.id + ")'>删除   </a>"
                            + "<a href='javascript:void(0)' >设为已读  </a>"
                            + "<a href='javascript:void(0)' onclick='show_detail(" + rowData.order + ")' >查看详情  </a>"

                    }
                }
            ]],
            loadFilter: function (data) {
                var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                var options = pager.pagination('options'); // 获取分页器的选项
                // 注意：以下代码是客户端分页的示例，但通常不推荐这样做，因为性能问题
                var start = (options.pageNumber) * options.pageSize;
                var rows = data.slice(start, start + options.pageSize);
                console.log({total: data.length, rows: rows})
                return {total: data.length, rows: rows};

            }
        });

    });

    function remove(id) {
        $.messager.confirm("提示", '确认删除？', function (data) {
            if (data) {
                $.messager.alert("提示", "删除成功！");
            }
        })
    }

    function show_detail(val) {
        console.log(val)
    }
</script>
</body>
</html>